import Taro, { Component } from '@tarojs/taro'
import { View , Image} from '@tarojs/components';
import { baseImgSrc } from '../../util/base_url';
import { changeUserRole , getBanner } from '../../util/api';
import { setRole } from '../../util/globaldata';
import './loginRole.scss';
export default class LoginRole extends Component {
    config = {
        navigationBarTitleText:"选择角色",
    }
    constructor(props) {
        super(props);
        this.state = {
            bannerList:[],
        }
    }
    componentWillMount(){
        getBanner({cid:3}).then(res => {
            if(res.code == 0){
                this.setState({bannerList:res.list});
            }
        })
    }
    createOrder(role){ // 0是司机1是车主
        changeUserRole({is_user:role == 1 ? 1 : 0}).then( res => {
            setRole(role)
            Taro.redirectTo({
                url:`/pages/createdorder/createdorder?role=${role}`
            })
        })
    }
    render(){
        let {bannerList } = this.state;
        return(
            <View className='login-role'>
               <Swiper
                    className='banner'
                    indicatorColor='#999'
                    indicatorActiveColor='#45A065'
                    circular
                    indicatorDots
                    autoplay>
                    {
                        bannerList.map( (v,i) => (
                            <SwiperItem>
                                <Image className='banner-pic' src={v.pic} />
                            </SwiperItem>
                        ))
                    }
                </Swiper>
                <View className='title flex align-items flex-start'>请选择，我是</View>
                <View className='role-item first-item' >
                    <Image className='item-pic' src={`${baseImgSrc}/car3.png`} onClick={this.createOrder.bind(this,1)} />
                    <View className='item-txt fn-ctr'>车主</View>
                </View>
                <View className='role-item' >
                    <Image className='item-pic' src={`${baseImgSrc}/driver3.png`} onClick={this.createOrder.bind(this,2)} />
                    <View className='item-txt fn-ctr'>驾驶者</View>
                </View>
            </View>
        )
    }
    
}